<!DOCTYPE html>
<html lang="en">
  <head>
    
    <title>Happy birthday to Xiao Jiang</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="Free HTML5 Website Template by ProBootstrap.com" />
    <meta name="keywords" content="free bootstrap 4, free bootstrap 4 template, free website templates, free html5, free template, free website template, html5, css3, mobile first, responsive" />
    <meta name="author" content="ProBootstrap.com" />
    
    <link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">

    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/open-iconic-bootstrap.min.css">
    
    <link rel="stylesheet" href="css/owl.carousel.min.css">
    <link rel="stylesheet" href="css/owl.theme.default.min.css">

    <link rel="stylesheet" href="css/icomoon.css">
    <link rel="stylesheet" href="css/animate.css">
    <link rel="stylesheet" href="css/style.css">
    <style>
    @media (max-width:350px){
        body{
        background:cover;
        background:url(./images/beij.jpg) ;
        background-attachment: fixed;
      }
    }
    
 
      .p{
        display:none;
        transition:.3s;
      }

      .hovers{
        font-size:28px;
        color:white;
      }
      .hovers:active{
        color:orange;
      }
      .p:active{
        color:red;
        font-size:24px;
      }
      .mt-h{
        font-size:24px;
        margin-left:10px;
      }
      #imgline{
        margin-top:20%;
        border-radius:30px;

      }
      .imgFont{
        color:white;
      }
      .img-2{
        border-radius:30px;

      }
      .pcolor{
        color:white;
      }
      .probootstrap-section{
        margin-top:-126px;
      }
  
      .border{
        border-color:none;
      }
    </style>
  </head>
  <body>
    
    <aside class="probootstrap-aside js-probootstrap-aside">
      <a href="#" class="probootstrap-close-menu js-probootstrap-close-menu d-md-none"><span class="oi oi-arrow-left"></span> Close</a>
      <div class="probootstrap-site-logo probootstrap-animate" data-animate-effect="fadeInLeft">
        
        <a href="index.html" class="mb-2 d-block probootstrap-logo">详情页</a>
        <p class="mb-0">Another free html5 bootstrap 4 </p>
      </div>
      <div class="probootstrap-overflow">
        <nav class="probootstrap-nav">
          <ul>
            <li class="probootstrap-animate" data-animate-effect="fadeInLeft"><a href="indexPage.html">主页</a></li>
            <li class="probootstrap-animate" data-animate-effect="fadeInLeft"><a href="about.html">详情页</a></li>
            <li class="probootstrap-animate" data-animate-effect="fadeInLeft"><a href="services.html">服务器</a></li>
            <li class="probootstrap-animate active" data-animate-effect="fadeInLeft"><a href="portfolio.html">图片详情</a></li>
            <li class="probootstrap-animate" data-animate-effect="fadeInLeft"><a href="contact.html">联系人</a></li>
          </ul>
        </nav>
        <footer class="probootstrap-aside-footer probootstrap-animate" data-animate-effect="fadeInLeft">
          <ul class="list-unstyled d-flex probootstrap-aside-social">
            <li><a href="https://im.qq.com/" class="p-2">QQ</a></li>
              <li><a href="https://wx.qq.com/" class="p-2">微信</a></li>
              <li><a href="https://mail.qq.com/cgi-bin/loginpage" class="p-2">邮箱</a></li>
          </ul>
          
        </footer>
      </div>
    </aside>


    <main role="main" class="probootstrap-main js-probootstrap-main">
      <div class="probootstrap-bar">
        <a href="#" class="probootstrap-toggle js-probootstrap-toggle"><span class="oi oi-menu"></span></a>
        <div class="probootstrap-main-site-logo"><a href="index.html">详情页</a></a></div>
      </div>
      <div class="container-fluid">
        <div class="row justify-content-center">
          <div class="col-xl-8 col-lg-12">
            <p class="mb-5"><img src="images/img_bg_2.jpg" alt="Free Bootstrap 4 Template by ProBootstrap.com" class="img-fluid imgline" id="imgline"></p>

            <div class="row">
              <div class="col-xl-8 col-lg-12 mx-auto imgFont">
                <h1 class="mb-5">希<span class="hovers">望在你步入爱的圣殿后，还能听到你的声音。</span></h1>
                <p class="p1 p" id="p1">嗨~ 小蒋,很荣幸认识你这么久,虽然不常联系,但是我们的感情还是记在心里的,为此,我精心准备了一份礼物,虽然不是很奢华,但用来纪念我们认识的这段感情就足够了.</p>
                
                <p class="p2 p" id="p2">
                我曾一度认为，最有意义的远行是背着背包去 自己想去的地方。</p>

                <p class="p3 p" id="p3">Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>

                <p class="p4 p" id="p4">The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way.</p>

                <p class="p5 p" id="p5">When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then she continued her way.</p>  
              </div>
            </div>
            
          </div>
        </div>
        <!-- END row -->

        <section class="probootstrap-section">
          <div class="container-fluid">
            <div class="row mb-5 justify-content-center">
              <div class="col-md-8">
                <div class="row">
                  <div class="col-md-8 mx-auto">
                    <!-- <h3 class="h1 mb-5 mt-0 mt-h">&nbsp;&nbsp;Enjoy reading</h3>     -->
                  </div>
                </div>
                
              </div>
            </div>
            <div class="row mb-5">
              <div class="col-md-12">
                <div class="owl-carousel probootstrap-owl">
                  
                  <div class="item">
                    <img src="images/f1.jpg" class="img-fluid img-2" alt="Free Template by ProBootstrap.com">
                    <div class="p-4  border-top-0">
                      <h4 class="pcolor">愿你每一次远行,都有家的方向</h4>
                      <p class="pcolor">
                      面对失败和挫折，亲情是一剂良药，填补你那失落的心，然后重整旗鼓，这是一种勇气；面对误解和仇恨，亲情是一杯凉水，浇灭你那心头的火，然后坦然面对，这是一种达观；面对赞扬和奉承，亲情是一把锥子，刺破你那虚无的梦，然后不断进取，这是一种警示；面对烦恼和忧愁，亲情是一阵轻风，吹去你那杂乱的思绪，然后平和释然这是一种境界 </p>
                    </div>
                  </div>
                  <div class="item">
                    <img src="images/f2.jpg" class="img-fluid img-2" alt="Free Template by ProBootstrap.com">
                    <div class="p-4 border-top-0">
                      <h4 class="pcolor">愿你每一次遇见,都是爱的见证</h4>
                      <p class="pcolor">
                      如若可以，请聆听我真挚的祝福，愿你的白马王子,执一笔素笺，今生，他为你吟尽千回百转念。当季节的风拂落一地风景妖娆，他仍会站在时光的渡口，守望来时青青路。如若可以，请许他花前月下，灵魂深处，为你，痴心缠绵醉流年。纵使泪洒沧桑，不求同床共枕眠，只愿一曲梁祝共翩跹</p>
                    </div>
                  </div>
                  <div class="item">
                    <img src="images/f3.jpg" class="img-fluid img-2" alt="Free Template by ProBootstrap.com">
                    <div class="p-4 border-top-0">
                      <h4 class="pcolor">愿你身体健康,事事顺心</h4>
                      <p class="pcolor">哈哈,总而言之,不许生病!天冷加衣.</p>
                    </div>
                  </div>
                  <div class="item">
                    <img src="images/f4.jpg" class="img-fluid img-2" alt="Free Template by ProBootstrap.com">
                    <div class="p-4 border-top-0">
                      <h4 class="pcolor">谢谢你,我还你陪伴你好久</h4>
                      <p class="pcolor">忙碌是一种幸福，让我们没有时间体会痛苦，奔波是一种快乐，让我们真实的感受生活；疲惫是一种享受，让我们无暇空虚；坎坷是一种经历，让我们真的理解人生。让快乐飞进你的门窗，让好运落在的身旁，让幸福常与你相拌，让如意流淌在你的心房；让岁月的诗句写满真诚与难忘</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            

            
          </div>
        </section>
        <!-- END section -->

      </div>

      <div class="container-fluid d-md-none">
        <div class="row">
          <div class="col-md-12">
            <ul class="list-unstyled d-flex probootstrap-aside-social">
              <li><a href="https://im.qq.com/" class="p-2">QQ</a></li>
              <li><a href="https://wx.qq.com/" class="p-2">微信</a></li>
              <li><a href="https://mail.qq.com/cgi-bin/loginpage" class="p-2">邮箱</a></li>
            </ul>
           
        </div>
      </div>

    </main>

    

    <script src="js/jquery-3.2.1.slim.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/owl.carousel.min.js"></script>
    <script src="js/jquery.waypoints.min.js"></script>
    <script src="js/imagesloaded.pkgd.min.js"></script>

    <script src="js/main.js"></script>

    <script>
        var imgline = document.getElementById("imgline");
      
          var Urlimg = window.location.href;
          Urlimg = Urlimg.split("=");
          console.log(Urlimg)
          var Urlp = Urlimg[1].split("_")[1].split(".")[0];

          imgline.src="./images/"+Urlimg[1];
          var pn = document.getElementById("p"+Urlp);
          console.log(pn);

           pn.style.display = "block";
          console.log(Urlp);
    
    </script>
  </body>
</html>